#top {
  position: relative;
}

#nav {
  height: 60px;
  width: 95%;
  margin: 10px auto 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.left {
  width: 15%;
  height: 100%;
  display: flex;
  align-items: center;
}

.left img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.left span {
  font-size: 30px;
  font-weight: bold;
}

.nav {
  display: flex;
  /* 水平对齐 */
  justify-content: space-around;
  align-items: center;
  width: 45%;
  height: 100%;
}

.nav .span {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-size: 18px;
  text-align: center;
  /* padding: 20px; */
  width: 150px;
  height: 60px;
  line-height: 60px;
}

.nav .ingIcno {
  top: 0;
  right: 0;
  position: absolute;
  width: 60px;
  height: 60px;
  background-image: url("../assets/ing.png");
  background-size: 60px;
}


.nav .active {
  cursor: pointer;
  color: #fff;
  background-color: #FFA500;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  height: 35px;
  width: 230px;
  border: 1px solid rgb(122, 122, 122);
  border-radius: 20px;
}

.search .searchHot,
.search .searchSuggest {
  z-index: 999;
  position: absolute;
  top: 40px;
  width: 300px;
  background: #fff;
  box-shadow: 0 0 15px 5px #e6e6e6;
  border-radius: 5px;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}


.searchHot ul li {
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 50px;
}

.searchHot ul li:hover {
  background-color: rgb(242, 242, 242);
}

.searchHot ul li .no {
  width: 50px;
  text-align: center;

}

.searchHot ul li .info .name span:first-child {
  font-weight: lighter;
}

.searchHot ul li .info .name span:nth-child(2) {
  font-size: 14px;
  color: #cdcdcd;
  margin-left: 5px;
  margin-right: 5px;
}

.hotIcno {
  width: 30px;
  height: 18px;
}

.searchHot ul li .info .content {
  width: 100%;
  font-size: 12px;
  color: #999;
  /* 单行文本省略 */
  overflow: hidden;
  /*超出部分隐藏*/
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  white-space: nowrap;
  /*规定段落中的文本不进行换行 */
  width: 200px;
  /*需要配合宽度来使用*/
}

.searchHot h3 {
  display: inline-block;
  color: #999;
  margin: 10px;
}

.search .searchSuggest {
  z-index: 999;
  position: absolute;
  top: 40px;
  width: 300px;
  background: #fff;
  box-shadow: 0 0 15px 5px #e6e6e6;
  border-radius: 5px;
}


.searchSuggest {
  padding-bottom: 20px;
}

.searchSuggest .songs .songsTitle,
.searchSuggest .artists .artTitle,
.searchSuggest .albums .albumsTitle {
  height: 35px;
  line-height: 35px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #9f9f9f;
  margin: 10px 0 0 10px;
}

.searchSuggest .songs .songsTitle .songsIcno {
  width: 20px;
  height: 20px;
  background-image: url("../assets/singleSong.png");
  background-size: 20px;
}

.songs .songsRes,
.artists .artRes,
.albums .albumsRes {
  font-size: 14px;
}

.songs .songsRes ul li,
.artists .artRes ul li,
.albums .albumsRes ul li {
  cursor: pointer;
  padding-left: 10px;
  line-height: 30px;
  height: 30px;
}

.songs .songsRes ul li span:first-child:hover,
.artists .artRes ul li span:first-child:hover,
.albums .albumsRes ul li span:first-child:hover {
  color: rgb(255, 165, 0);
}

.songs .songsRes ul li:hover,
.artists .artRes ul li:hover,
.albums .albumsRes ul li:hover {
  background-color: rgb(242, 242, 242);
}

.searchSuggest .artists .artTitle .artIcno {
  width: 20px;
  height: 20px;
  background-image: url("../assets/singer.png");
  background-size: 20px;
  margin-right: 5px;
}

.albums .albumsTitle .albumsIcno {
  width: 20px;
  height: 20px;
  background-image: url("../assets/album.png");
  background-size: 20px;
  margin-right: 5px;
}

.inputBack {
  margin-left: 5px;
  margin-right: 5px;
  width: 30px;
  height: 30px;
  background: url("../assets/topbar.png");
  background-position: 1px 115px;
}

.search input {
  outline: none;
  border: none;
  width: 80%;
  display: inline-block;
  height: 30px;
  font-size: 14px;
}

.user .login span {
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  /* width: 40px; */
}

.user .login span {
  color: rgb(255, 165, 0);
}

.user .login span:first-child {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 5px;
  background-color: rgb(255, 165, 0);
  color: #fff;
  margin-right: 10px;
}

#login {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  background: rgba(0, 0, 0, .4);
}

.loginArea {
  width: 500px;
  height: 300px;
  background-color: #e6e6e6;
  border-radius: 5px;
}

.loginArea .choose {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.choose span {
  cursor: pointer;
  display: inline-block;
  width: 50%;
  text-align: center;
}

.choose span:first-child {
  background-color: rgb(255, 165, 0);
  color: #fff;
  border-bottom-right-radius: 5px;
}

.geci {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  width: 100%;
  height: 90%;
  background-image: linear-gradient(#cdcdcd, rgb(241, 243, 244));
}

.geci img {
  border-radius: 50%;
  width: 300px;
  height: 300px;
}

.rotate img {
  animation: rotateIMG 15s linear infinite;
}

.rotate i {
  animation: rotateIMG 15s linear infinite;
}

.rotatePause img {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  /* Safari 和 Chrome */
}

.rotatePause i {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  /* Safari 和 Chrome */
}

@keyframes rotateIMG {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.playFather {
  height: 100px;
}

#play {

  border-top: 2px solid rgb(225, 225, 225);
  width: 100%;
  position: fixed;
  /* position: relative; */
  bottom: 0;
  background: rgba(255, 255, 255);
}

.bottom {
  display: flex;
  align-items: center;
}

#play .info {
  width: 25%;
  color: #999;
  height: 50px;
  margin: 10px;
  display: flex;
  align-items: center;
}

#play .info .img {
  width: 50px;
  height: 50px;
}

#play .info .img img {
  border-radius: 5px;
  width: 50px;
  height: 50px;
}

#play .name {
  width: 300px;
  margin-left: 10px;
}

#play .singName span:last-child {
  color: #cdcdcd;
}


#play .artName {
  padding-top: 5px;
  font-size: 14px;
  color: #515151;
}

.audioPlay {
  width: 70%;
  height: 100%;
  display: flex;
  justify-content: center;
  /* margin: 0 auto; */
  /* border: 1px solid red; */
}

.tidai {
  width: 70%;
  /* margin-right: 0; */
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* position: relative; */
}

.playLeft {
  display: flex;
  align-items: center;
}

.playLeft .controls {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preIcno,
.nextIcno {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-size: 50px;
  margin: 0 20px;
}

.pauseIcno,
.playIcno {
  display: inline-block;
  width: 70px;
  height: 70px;
  background-size: 70px;
}

.preIcno {
  background-image: url("../assets/pre.png");
}

.pauseIcno {
  background-image: url("../assets/timeOut.png");
}

.playIcno {
  background-image: url("../assets/playMusic.png");
}

.nextIcno {
  background-image: url("../assets/next.png");
}

.listIcno {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url("../assets/list.png");
  background-size: 50px;
  background-position: center center;
}

.progress {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 14px;
}

.fenge {
  margin-left: 5px;
  margin-right: 5px;
}

.process {
  position: relative;
  width: 100%;
  height: 5px;
  background: rgb(205, 205, 205);
  border-radius: 5px;
}

.process .line {
  position: absolute;
  left: 0;
  top: 0;
  height: 5px;
  /* border-radius: 50%; */
  background-color: rgb(255, 165, 0);
  transition: width .1s;
}

.dot {
  width: 15px;
  height: 15px;
  position: absolute;
  left: 0;
  top: -5px;
  border-radius: 50%;
  background-color: rgb(255, 165, 0);
  transition: left .1s;
}

.play-fade-enter-active,
.play-fade-leave-active {
  transition: opacity .6s;
}

.play-fade-enter,
.play-fade-leave-active {
  opacity: 0
}

.icno-fade-enter-active,
.icno-fade-leave-active {
  transition: opacity .6s;
}

.icno-fade-enter,
.icno-fade-leave-active {
  opacity: 0
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity .6s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0
}

.icno {
  position: fixed;
  bottom: 20px;
  left: 30px;
}

#playIcno {
  position: relative;
}

#playIcno img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.pauseSmallIcno {
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background: url("../assets/播放2.png") no-repeat;
  background-size: 20px;
  background-position: center center;
  background-color: rgba(255, 255, 255, .3)
}

.playSmallIcno {
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background: url("../assets/暂停.png") no-repeat;
  background-size: 20px;
  background-position: center center;
}

.playList {
  overflow-y: auto;
  width: 400px;
  height: 85%;
  position: fixed;
  bottom: 76px;
  /* bottom: 0; */
  right: 0;
  background-color: rgba(255, 255, 255);
  box-shadow: 0 0 15px 5px #e6e6e6;
  border-radius: 5px;
}

.playList::-webkit-scrollbar {
  width: 0;
}

.playList .title {
  padding: 5px 10px;
}

.playList .title div {
  margin-top: 5px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 14px;
  color: #999;
}

.playList .title div span {
  cursor: pointer;
}

.playList ul {
  font-size: 14px;
  width: 95%;
  margin: 0 auto;
}

.playList ul li {
  cursor: pointer;
  padding: 0 5px;
  height: 40px;
  line-height: 40px;
  display: flex;
}

.playList ul li:nth-child(odd) {
  background-color: rgb(249, 249, 249);
}

.playList ul li:hover {
  color: #FFA500;
  background-color: rgb(244, 244, 244);
}

.playList ul li span {
  display: inline-block;
}

.playList ul li .allname {
  width: 200px;
  overflow: hidden;
  /* 顾名思义超出限定的宽度就隐藏内容 */
  white-space: nowrap;
  /* 设置文字在一行显示不能换行 */
  text-overflow: ellipsis;
  /* 规定当文本溢出时显示省略符号来代表被修剪的文本 */
}

.playList ul li .allartName,
.playList ul li .allalName {
  font-size: 14px;
  color: #999;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
